<template>
  <div class="buttons-container">
    <!-- 未显示释义时的按钮 -->
    <div v-if="currentWord && !showDefinition" class="buttons-wrapper">
      <div class="grid grid-cols-3 gap-4">
        <button 
          class="pt-3 pb-2 border-none text-white font-semibold text-lg transition-all duration-300 bottom-line-green text-shadow-green" 
          @click="$emit('response', 'know')"
        >
          认识
        </button>
        <button 
          class="pt-3 pb-2 border-none text-white font-semibold text-lg transition-all duration-300 bottom-line-yellow text-shadow-yellow" 
          @click="$emit('response', 'fuzzy')"
        >
          模糊
        </button>
        <button 
          class="pt-3 pb-2 border-none text-white font-semibold text-lg transition-all duration-300 bottom-line-red text-shadow-red" 
          @click="$emit('response', 'unknown')"
        >
          不认识
        </button>
      </div>
    </div>
    
    <!-- 显示释义且不是最后一个单词时的按钮 -->
    <div v-else-if="currentWord && showDefinition" class="buttons-wrapper">
      <div class="grid grid-cols-3 gap-4">
        <button 
          class="pt-3 pb-2 border-none text-white font-semibold text-lg transition-all duration-300 bottom-line-green text-shadow-green" 
          @click="$emit('next-word')"
        >
          下一词
        </button>
        <button 
          class="pt-3 pb-2 border-none text-white font-semibold text-lg transition-all duration-300 bottom-line-yellow invisible" 
        >
          模糊
        </button>
        <button 
          class="pt-3 pb-2 border-none text-white font-semibold text-lg transition-all duration-300 bottom-line-red text-shadow-red" 
          @click="$emit('wrong')"
        >
          记错了
        </button>
      </div>
    </div>
    
    <!-- 学习完成时的按钮，自动转跳提示 -->
    <div v-else class="buttons-wrapper">
      <div class="w-full text-center pt-3 pb-2 text-white font-semibold text-lg">
        <div class="flex items-center justify-center gap-2">
          <span>正在跳转到文章页面</span>
          <span class="loading-dots">...</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, nextTick, watch, ref } from 'vue';

const props = defineProps({
  currentWord: {
    type: Object,
    default: null
  },
  showDefinition: {
    type: Boolean,
    default: false
  },
  progress: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits([
  'response',
  'next-word',
  'wrong',
  'generate-essay',
  'back'
]);

// 用于确保组件完全渲染
let mounted = ref(false);
let redirectTriggered = ref(false);

// 首次加载检查
onMounted(() => {
  mounted.value = true;
  // 组件挂载后立即检查一次
  checkRedirect();
});

// 监听单词状态和进度变化
watch([() => props.currentWord, () => props.progress], () => {
  if (mounted.value) {
    checkRedirect();
  }
}, { deep: true });

// 检查是否需要重定向
function checkRedirect() {
  if (props.progress >= 100 && !redirectTriggered.value) {
    redirectTriggered.value = true; // 防止重复触发
    emit('generate-essay');
  }
}
</script>

<style scoped>
/* 按钮容器过渡效果 */
.buttons-container {
  position: relative;
  width: 100%;
}

.buttons-wrapper {
  width: 100%;
  animation: fadeIn 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 按钮过渡效果 */
button {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: all 0.3s ease;
}

button:hover {
  transform: translateY(-2px);
}

button:active {
  transform: translateY(1px);
}

/* 底部按钮线条样式 */
.bottom-line-green::after,
.bottom-line-yellow::after,
.bottom-line-red::after,
.bottom-line-blue::after,
.bottom-line-gray::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  border-radius: 1.5px;
  transition: all 0.3s ease;
}

.bottom-line-green:hover::after,
.bottom-line-yellow:hover::after,
.bottom-line-red:hover::after,
.bottom-line-blue:hover::after {
  width: 40px;
  height: 4px;
}

.bottom-line-green,
.bottom-line-yellow,
.bottom-line-red,
.bottom-line-blue,
.bottom-line-gray {
  position: relative;
}

.bottom-line-green::after {
  background-color: #4CAF50;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

.bottom-line-yellow::after {
  background-color: #FFC107;
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
}

.bottom-line-red::after {
  background-color: #F44336;
  box-shadow: 0 0 8px rgba(244, 67, 54, 0.6);
}

.bottom-line-blue::after {
  background-color: #2196F3;
  box-shadow: 0 0 8px rgba(33, 150, 243, 0.6);
}

.bottom-line-green:hover::after {
  box-shadow: 0 0 12px rgba(76, 175, 80, 0.8);
}

.bottom-line-yellow:hover::after {
  box-shadow: 0 0 12px rgba(255, 193, 7, 0.8);
}

.bottom-line-red:hover::after {
  box-shadow: 0 0 12px rgba(244, 67, 54, 0.8);
}

.bottom-line-blue:hover::after {
  box-shadow: 0 0 12px rgba(33, 150, 243, 0.8);
}

.bottom-line-gray::after {
  background-color: #333;
}

/* 文字阴影效果 */
.text-shadow-green {
  text-shadow: 0 0 5px rgba(76, 175, 80, 1);
}

.text-shadow-yellow {
  text-shadow: 0 0 5px rgba(255, 193, 7, 1);
}

.text-shadow-red {
  text-shadow: 0 0 5px rgba(244, 67, 54, 1);
}

.text-shadow-blue {
  text-shadow: 0 0 5px rgba(33, 150, 243, 1);
}

/* 悬停时增强文字阴影 */
.text-shadow-green:hover {
  text-shadow: 0 0 15px rgba(76, 175, 80, 1);
}

.text-shadow-yellow:hover {
  text-shadow: 0 0 15px rgba(255, 193, 7, 1);
}

.text-shadow-red:hover {
  text-shadow: 0 0 15px rgba(244, 67, 54, 1);
}

.text-shadow-blue:hover {
  text-shadow: 0 0 15px rgba(33, 150, 243, 1);
}

@keyframes loading {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.loading-dots {
  animation: loading 1.5s infinite;
}
</style> 